iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 18
0

OK 鐵人賽已經過半了,我也已經把 React Native 常用的基礎元件和排版方法教完了,接下來就是要實戰了,我們的標題可是 React Native 航向真全端,建構雙平台 App,如果沒有實際建構一個怎麼可以說我們要建構一款雙平台 App 呢?所以接下來時間我會嘗試帶著大家建構一款 EC 的 React Native App,不過只有 App 前端的部分,後台 Api 在這次鐵人賽就不多作介紹摟。

找個好用的 boilerplate、Starter kit

為什麼要找一個好用的 boilerplate、Starter kit呢?官方不是已經有提供方便的 cli 可以建構一個完整的 React Native 專案了嗎?理由很簡單喔,因為官方的是最基礎的專案架構,只有一些陽春 Debug 功能,資料處理的 Redux 部分也沒有,所以直接用別人在維護的 boilerplate 會方便許多,筆者習慣使用的 React Native boilerplate 是這款,react-native-boilerplate,他是 jhen0409 大大維護的專案,雖然星星數不多,但是 jhen0409 大大也是 react-native-debugger 的開發者,所以我想沒有人接的 react-native-debugger 會比他更完整了,這個 boilerplate 當中包含 React Native 最新版、Redux、Remote Redux DevTools、Immutable 等等工具,還有包含測試可以方便我們開發。

使用

git clone https://github.com/jhen0409/react-native-boilerplate.git
npm install
npm start
npm run ios       #開發 ios 等同 react-native run-ios
npm run android   #開發 android 等同 react-native run-android

開啟後的畫面
http://ithelp.ithome.com.tw/upload/images/20170102/20103341bb6LqxbBMl.png

專案架構

├── LICENSE
├── README.md
├── android                      # android 專案檔
│   ├── app
│   ├── build
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   └── settings.gradle
├── index.android.js             # android 進入點
├── index.ios.js                 # ios 進入點
├── ios                          # xcode 專案檔
│   ├── RNBoilerplate
│   ├── RNBoilerplate.xcodeproj
│   ├── RNBoilerplateTests
│   └── build
├── package.json
├── src                          # React Native 主要邏輯
│   ├── actions                  # Redux Action 放置位置
│   ├── components               # Dump component 放置位置
│   ├── config
│   ├── configureStore.js
│   ├── containers               # Smart component 放置位置,會去使用 Action 的 component
│   ├── index.js                 # src 進入點
│   └── reducers                 # Redux reducer 放置位置
├── test                         # test case
│   ├── actions
│   ├── components
│   ├── reducers
│   └── setup.js
└── yarn.lock

OK 今天先到這樣,明天我們動手來刻第一個 UI 吧!!
如果有關注的朋友,會發現忽然冒出了一個 Redux,這個 Redux 呢是 React 當中用來處理每個 component 資料交互的工具,可以方便我們管理所有資料,未來會在實作中慢慢的介紹使用方法和,大家拭目以待吧


有問題歡迎來 React Native Taiwan 問喔
創科資訊


上一篇
React Native Navigator 進階版 使用 react-native-router-flux
下一篇
React Native App 實戰 (二) 87% 像 Spotify 登入頁面
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言